<template>
  <div>
    <img src="../../assets/logo.png">
    <div class="login-wrap" v-show="showLogin">
      <h3>登录</h3>
      <p v-show="showTishi">{{tishi}}</p>
      <input class="inp" type="text" placeholder="请输入用户名" v-model="userName" value="admin">
      <input class="inp" type="password" placeholder="请输入密码" v-model="password" value="admin">
      <button v-on:click="login">登录</button>
      <span v-on:click="ToRegister">没有账号？马上注册</span>
    </div>

    <div class="register-wrap" v-show="showRegister">
      <h3>注册</h3>
      <p v-show="showTishi">{{tishi}}</p>
      <input class="inp" type="text" placeholder="请输入用户名" v-model="newuserName">
      <input class="inp" type="password" placeholder="请输入密码" v-model="newPassword">
      <button v-on:click="register">注册</button>
      <span v-on:click="ToLogin">已有账号？马上登录</span>
    </div>
  </div>
</template>

<style>
  .login-wrap {
    text-align: center;
  }

  .register-wrap {
    text-align: center;
  }

  .inp {
    display: block;
    width: 250px;
    height: 40px;
    line-height: 40px;
    margin: 0 auto;
    margin-bottom: 10px;
    outline: none;
    border: 1px solid #888;
    padding: 10px;
    box-sizing: border-box;
  }

  p {
    color: red;
  }

  button {
    display: block;
    width: 250px;
    height: 40px;
    line-height: 40px;
    margin: 0 auto;
    border: none;
    background-color: #41b883;
    color: #fff;
    font-size: 16px;
    margin-bottom: 5px;
  }

  span {
    cursor: pointer;
  }

  span:hover {
    color: #41b883;
  }

  #app {
    text-align: center;
    color: #2c3e50;
    margin-top: 80px;
  }
</style>

<script>
  import {setCookie,getCookie} from '../../assets/js/cookie.js'
  import {baseLoginFun,baseRegisterFun,checkLoginForLogin} from "../../assets/js/user.js";
  export default{
    data(){
      return {
        showLogin: true,
        showRegister: false,
        showTishi: false,
        tishi: '',
        userName: 'admin',
        password: 'admin',
        newuserName: '',
        newPassword: ''
      }
    },
    mounted(){
      const that = this;
      // 验证是否一登陆
      /*setTimeout(function () {
        checkLoginForLogin(that,function(){
          alert('已登录自动跳转主页');
          setTimeout(function () {
            that.$router.push('/home');
          },1000)
        });
      },1000)*/
    },
    methods: {
      login(){
        this.tishi =""
        if (this.userName == "" || this.password == "") {
          alert("请输入用户名或密码")
        } else {
          toLoginFun(this);
        }
      },
      ToRegister(){
        this.showRegister = true
        this.showLogin = false
      },
      ToLogin(){
        this.showRegister = false
        this.showLogin = true
      },
      register(){
        this.tishi =""
        if (this.newuserName == "" || this.newPassword == "") {
          alert("请输入用户名或密码")
        } else {
          const that = this;
          baseRegisterFun(this.newuserName,this.newPassword,function (message) {
            that.tishi = message;
            that.showTishi = true
            /*注册成功之后再跳回登录页*/
            toLoginFun(that,that.newuserName,that.newPassword);
          },function (message) {
            that.tishi = message;
            that.showTishi = true;
          })
        }
      }
    }
  }

  // 去登陆
  function  toLoginFun(that,userName,password){
    if(userName == undefined || password == undefined){
      userName = that.userName;
      password = that.password;
    }
    baseLoginFun(userName,password,function (message){
      that.tishi = "登录成功"
      that.showTishi = true
      setTimeout(function () {
        that.$router.push('/home')
      }.bind(that), 1000)
    },function (message) {
      that.tishi = message;
      that.showTishi = true;
    });
  }
</script>
